<template>
	<view class="home">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="tabs">
			<u-tabs
				:list="tabList"
				lineWidth="30"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="height: 45px;width:44%;"
				@click="onClick"
			></u-tabs>
		</view>
		<block v-if="list.length > 0">
		<view class="list">
			<view class="list_meun" v-for="(item,index) in list" :key="index" @click="detail()">
				<view class="list_meun_left">
					<view class="list_meun_bg">评选</view>
					<view class="list_meun_name">用户1</view>
				</view>
				<u-icon name="arrow-right" color="#dfdfdf" size="16"></u-icon>
			</view>
		</view>
		</block>
		<view class="empty" v-else>
			<image src="../../static/images/bg03.png" mode="aspectFit"></image>
			<text>暂时什么都没有~</text>
		</view>
	</view>
</template>

<script>
import { userGatherListAPI } from '@/api/user'
export default {
	data() {
		return {
			title: '投票',
			bgColor: '#fff',
			active:1,
			list: [],
			tabList: [
				{
					name: '进行中'
				},
				{
					name: '已完成'
				}
			]
		};
	},
	mounted() {
		
	},
	
	onLoad(options) {
		this.type = options.type
		if (options.type == 1) {
			this.title = '我报名的投票';
		} else if (options.type == 2) {
			this.title = '我发起的投票';
		} else if (options.type == 3) {
			this.title = '我参与的投票';
		}
	},
	onShow() {
		this.getData()
	},
	methods: {
		onClick(item){
			if(item.index == 0){
				this.active = 1
			}else if(item.index == 1){
				this.active = 2
			}
			this.getData()
		},
		getData(data){
			var parems = {
				token:uni.getStorageSync('accessToken'),
				type:this.type,
				status:this.active,
				project_id:''
			}
			userGatherListAPI(parems).then(res => {
				if(res.code == 1){
					this.list = res.data
				}else {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
		},
		detail(){
			uni.navigateTo({
				url:"./typeDetail"
			})
		}
	}
};
</script>

<style>
/* page {
	background: #f6f6f6 !important;
} */
</style>
<style lang="scss" scoped>
.tabs {
	margin-top: 128rpx;
	background: #fff;
	border-bottom: 2rpx solid #eee;
	padding-bottom: 10rpx;
}
.list{
	padding: 0 30rpx;
}
.list_meun{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #eee;
	height: 120rpx;
}
.list_meun_left{
	display: flex;
	align-items: center;
}
.list_meun_bg{
	background: #3c9cff;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #ffffff;
}
.list_meun_name{
	font-size: 32rpx;
	color: #303133;
	letter-spacing: 1rpx;
	margin-left: 10rpx;
}
.empty {
	width: 100%;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image {
		width: 100%;
		height: 200rpx;
	}
	text {
		font-size: 26rpx;
		color: #808080;
		margin-top: 15rpx;
		letter-spacing: 2rpx;
	}
}
</style>
